<template>
	<view class="page">
		<view class="m-cells m-cells-form">
			<view style="padding: 0 16px; font-size: 12px; color: #666;margin-bottom: 16px;">
				乘势而上 抢时代红利<br/>
				臻稀代理人席位 火爆招募中<br/>
				海量用户/高效成长/超低投入/超高回报<br/>
				(有医药经营经验者优先)<br/>
			</view>
			<view class="m-cell">
				<view class="m-cell-hd"><label class="u-label">{{ __('联系人') }}</label></view>
				<view class="m-cell-bd">
					<input class="u-input" type="text" :value="(ud_name||'')" :placeholder="__('请输入姓名')"
						@input="inputud_name" />
				</view>
				<div v-if="(ud_name=='')" class="m-cell-ft">
					<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
				</div>
			</view>
			<view class="m-cell">
				<view class="m-cell-hd"><label class="u-label">{{ __('联系电话') }}</label></view>
				<view class="m-cell-bd">
					<input class="u-input" type="text" :value="(telephone||'')" :placeholder="__('请输入联系电话')"
						@input="inputtelephone" />
				</view>
				<div v-if="(telephone=='')" class="m-cell-ft">
					<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
				</div>
			</view>
			<view class="m-cell" style="align-items: self-start; line-height: 20px;margin-top: 10px;">
				<view class="m-cell-hd"><label class="">{{ __('申请说明') }}</label></view>
				<view class="m-cell-bd">
					<textarea placeholder="请输入申请说明" v-model="ud_remark" style=" font-size: 14px; width: auto;" name=""
						id="" cols="30" rows="10"></textarea>
				</view>
				<div v-if="(ud_remark=='')" class="m-cell-ft">
					<view class="m-icon-warn uni-icon uni-icon-info" type="warn"></view>
				</div>
			</view>


		</view>

		<button class="u-btn u-btn-default" @click="submit">{{ __('提交申请') }}</button>
		<view style="padding: 0 16px; font-size: 10px; color: #666;">
			注：代理人提交申请后，本司将对提交资料进行初步审核，审核周期为7天，请耐心等候。审核通过后，我们将有客服人员第一时间与您取得联系。
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import "../../styles/_variables";

	.btn_box {
		padding: 20rpx;
	}

	.m-cell-bd switch {
		float: right;
	}

	.m-cell-hd {
		width: 180rpx;
	}

	.m-select-box-msk {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 3;
	}

	.m-select-box {
		position: absolute;
		width: 100%;
		height: 300px;
		background-color: #fff;
		left: 0;
		bottom: 0;
	}

	.u-select {
		width: 100%;
		height: 300px;
		text-align: center;
	}

	.u-select .m-cell-bd {
		width: 100%;
		line-height: 50px;
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.u-select .m-cell-bd label {
		width: 100%;
	}

	.m-select-content {
		position: relative
	}

	.m-close-panel {
		height: 60rpx;
		border-bottom: 1rpx solid #dfdfdf;
		font-size: 24rpx;
		text-align: right;
		color: #73AE1F;
		line-height: 60rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.m-cell-select-before .m-cell-bd {
		padding: 0;
	}

	.m-icon-warn {
		color: red;
		position: relative;
	}

	uni-picker {
		padding-top: 4rpx;
	}
</style>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'


	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'

	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				ud_name: "",
				ud_remark: "",
				detail: "",
				telephone:"",
			}
		},
		computed: {
			...mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
			_lang() {
				let lists = [];

				for (let idx in this.Lang.data.items) {
					lists.push({
						id: this.Lang.data.items[idx].currency_id,
						name: this.Lang.data.items[idx].label + '(+' + this.Lang.data.items[idx].currency_id + ')'
					})

					if (idx == this.mode_index) {
						this.user_intl = '+' + this.Lang.data.items[idx].currency_id;
					}
				}

				return lists;
			}
		},
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('代理招募申请')
			});
		},
		onBackPress() {
		},
		onUnload() {
		},

		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			inputud_name: function(e) {
				this.setData({
					ud_name: e.detail.value
				})
			},
			inputtelephone: function(e) {
				this.setData({
					telephone: e.detail.value
				})
			},

			submit: function() {
				var that = this;
				if (that.ud_name == "") {
					that.$.showToast({
						title: that.__("请输入联系人"),
						icon: "error",
						duration: 2e3,
					})
					return
				}
				if (that.telephone == "") {
					that.$.showToast({
						title: that.__("请输入联系电话"),
						icon: "error",
						duration: 2e3,
					})
					return
				}
				if (that.ud_remark == "") {
					that.$.showToast({
						title: that.__("请输入申请说明"),
						icon: "error",
						duration: 2e3,
					})
					return
				}
				var params = {
					contacts: that.ud_name,
					remark: that.ud_remark,
					telephone: that.telephone,
				}

				var options = that.options;
				that.$.request({
					url: this.Config.URL.user.Proxy_add,
					method: "POST",
					data: params,
					success: function(data, status, msg, code) {
						if (status == 200) {
							that.$.showToast({
								title: that.__("添加成功"),
								icon: "success",
								duration: 2e3,
								success: function() {
									setTimeout(function() {
										that.$.navigateBack(1);
									}, 1000); 
								}
							})
						} else {
							that.$.alert(msg)
						}
					}
				});


			},
		}
	};
</script>